<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="include :: header"></head>
<body class="hold-transition skin-blue sidebar-mini">

<!--库存明细信息模态框-->
<section class="content-header">
    <h1>
        原料库出库单
    </h1>
</section>
<section class="content">

    <div id="printArea" style=" display: none;">
        <div style="padding-bottom: 10px;text-align: center;vertical-align: middle;">
            <div style="font-size: 20px;vertical-align: middle;display: inline-block;font-weight: bold;">辽宁忠旺机械设备制造有限公司出库单</div>
        </div>
        <table style="font-size:12px;width: 100%;line-height: 20px;">
            <tr>
                <td width="25%">使用部门：<label th:text="${order.odrTakeWorkshop}" style="font-weight: normal"></label></td>
                <td width="20%">领料人：<label th:text="${order.odrTakePerson}" style="font-weight: normal"></label></td>
                <td width="25%">出库日期：<label th:text="${#dates.format(order.odrDate, 'yyyy-MM-dd')}"
                                            style="font-weight: normal"></label></td>
                <td width="30%">单据编号：<label th:text="${order.odrCode}" style="font-weight: normal"></label></td>
            </tr>
            <tr>
                <td colspan="3">摘要：<label th:text="${#strings.contains(order.odrRemark,'领料出库')}?'':${order.odrRemark}"
                                          style="font-weight: normal"></label></td>
                <td>制单人：<label th:text="${order.odrMakePerson}" style="font-weight: normal"></label></td>
            </tr>
        </table>
        <div id="table-box">
        </div>
    </div>

    <form id="outBillForm" role="form"
          enctype="multipart/form-data">
        <input type="hidden" id="odrId" th:value="${order.odrId}">
        <div class="row">
            <div class="col-xs-12">
                <div class="box">
                    <div class="box-body">
                        <div class="row">
                            <div class="form-inline">
                                <div class="form-group">
                                    <label>单据编号</label>
                                    <input type="text" class="form-control" name="" th:value="${order.odrCode}"
                                           placeholder=""
                                           readonly="readonly"/>
                                </div>
                                <div class="form-group">
                                    <label>领料人</label>
                                    <input id="odrTakePerson" type="text" class="form-control" name=""
                                           placeholder="" th:value="${order.odrTakePerson}"
                                           autocomplete="off" readonly="readonly"/>
                                </div>
                                <div class="form-group">
                                    <label>出库日期</label>
                                    <input type="text" class="form-control datepicker"
                                           th:value="${#dates.format(order.odrDate, 'yyyy-MM-dd')}"
                                           id="odrDate" name="odrDate" readonly="readonly"/>
                                </div>
                                <div class="form-group">
                                    <label>摘要</label>
                                    <input id="odrRemark" type="text" class="form-control" name="" placeholder=""
                                           th:value="${order.odrRemark}"
                                           autocomplete="off" readonly="readonly"/>
                                </div>
                                <div class="form-group">
                                    <label>使用部门</label>
                                    <select id="odrTakeWorkshop" class="form-control " name="odrTakeWorkshop"
                                            disabled="disabled">
                                        <option value="">请选择</option>
                                        <option th:each="type:${dept}" th:value="${type.depName}"
                                                th:text="${type.depName}"
                                                th:selected="${order.odrTakeWorkshop == type.depName}"></option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div id="hot"></div>
                        </div>
                    </div>
                    <div class="box-footer">
                        <div class="row">
                            <div class="col-md-2">
                                <label>制单人：</label><label th:text="${order.odrMakePerson}"></label>
                            </div>
                            <div class="col-md-6">
                                <label></label>
                            </div>
                            <div class="col-md-4">
                                <div class="col-md-2 col-md-offset-6">
                                </div>
                                <div class="col-md-1  col-md-offset-7">
                                    <button type="button" id="btn_print" class="btn btn-info file-contract btn-file"
                                            shiro:hasPermission="matwar:matwarquery:print">打印
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</section>
<div th:include="include :: footer"></div>
<script th:src="@{/js/jquery.PrintArea.js}"></script>
<script th:inline="javascript">

    function printOrderDetail(odrId) {

        $("#printArea").show();

        js.get({
            url: ctx + "material/order/orderDetail",
            data: {odrId: odrId},
            success: function (result) {
                var printList = result.data;

                // 添加dataTable表头
                $("#table-box").empty();
                $("#table-box").append('<table id="outBillTable"\n' +
                    '               style="font-size: 12px;text-align: center;border-right:1px solid;border-bottom:1px solid; border-collapse: collapse;"\n' +
                    '               width="100%"\n' +
                    '               cellspacing="0" cellpadding="1">\n' +
                    '        </table>');
                $("#outBillTable").append('<THEAD style="display:table-header-group;">\n' +
                    '                         <TR><td style="border-left: 1px solid;border-top: 1px solid;">序号</td>' +
                    '<td style="border-left: 1px solid;border-top: 1px solid;">原料描述(类型_材质_规格 宽*长*米重/厚度)</td>' +
                    '<td style="border-left: 1px solid;border-top: 1px solid;">数量</td>' +
                    '<td style="border-left: 1px solid;border-top: 1px solid;">领料长度(米)</td>' +
                    '<td style="border-left: 1px solid;border-top: 1px solid;">重量</td>' +
                    // '<td style="border-left: 1px solid;border-top: 1px solid;">跟踪号</td>' +
                    '<td style="border-left: 1px solid;border-top: 1px solid;">项目名称</td>' +
                    // '<td style="border-left: 1px solid;border-top: 1px solid;">供应商</td>' +
                    // '<td style="border-left: 1px solid;border-top: 1px solid;">合同编号</td>' +
                    '<td style="border-left: 1px solid;border-top: 1px solid;width: 8%">在库类型</td>' +
                    '<td style="border-left: 1px solid;border-top: 1px solid;width: 8%">备注</td></TR>\n ' +
                    '                         </THEAD> ');
                $("#outBillTable").append('<tbody id="myTb"> </tbody>');
                // 循环绑定dataTable行数据
                var rowIndex;
                var matNameDesc;
                var odaNum;
                var pkMatLength;
                var odaWeight;
                var odaTrackCode;
                var odaProName;
                var odaInTypeName;
                var odaSpec;
                var supplier;
                var contractNo;

                var newRow;

                for (i = 0; i < printList.length; i++) {
                    rowIndex = printList[i]["rowIndex"];
                    matNameDesc = printList[i]["matNameDesc"];
                    odaNum = printList[i]["odaNum"];
                    pkMatLength = printList[i]["pkMatLength"];
                    odaWeight = printList[i]["odaWeight"];
                    odaTrackCode = printList[i]["odaTrackCode"];
                    odaProName = printList[i]["odaProNamePrint"];
                    odaInTypeName = printList[i]["odaInTypeName"];
                    odaSpec = printList[i]["odaSpec"] == null ? '' : printList[i]["odaSpec"];
                    supplier = printList[i]["supplier"] == null ? '' : printList[i]["supplier"];
                    contractNo = printList[i]["contractNo"] == null ? '' : printList[i]["contractNo"];

                    newRow = "<tr><td style='border-left:1px solid;border-top:1px solid'>" + rowIndex + "</td>" +
                        "<td style='border-left:1px solid;border-top:1px solid'>" + matNameDesc + "</td>" +
                        "<td style='border-left:1px solid;border-top:1px solid'>" + odaNum + "</td>" +
                        "<td style='border-left:1px solid;border-top:1px solid'>" + pkMatLength + "</td>" +
                        "<td style='border-left:1px solid;border-top:1px solid'>" + odaWeight + "</td>" +
                        // "<td style='border-left:1px solid;border-top:1px solid'>" + odaTrackCode + "</td> \n" +
                        "<td style='border-left:1px solid;border-top:1px solid'>" + odaProName + "</td>" +
                        // "<td style='border-left:1px solid;border-top:1px solid'>" + supplier + "</td>" +
                        // "<td style='border-left:1px solid;border-top:1px solid'>" + contractNo + "</td>" +
                        "<td style='border-left:1px solid;border-top:1px solid'>" + odaInTypeName + "</td>" +
                        "<td style='border-left:1px solid;border-top:1px solid'>" + odaSpec + "</td></tr>";
                    $("#myTb").append(newRow);
                }

                $("#printArea").printArea();
                $("#printArea").hide();
            }
        });
    }

    $(function () {

        js.get({
            url: ctx + "material/order/orderDetail",
            data: {odrId: $('#odrId').val()},
            success: function (result) {

                /**表单加载*/
                js.hot.init({
                    element: document.getElementById('hot'),
                    data: result.data,
                    formData: ["odrType", "odrTakePerson", "odrRemark", "odrDate", "odrTakeWorkshop"],
                    colHeaders: ['ID', '类型', '材质', '规格', '宽度', '长度', '米重/厚度', '数量', '领料长度(米)','重量', '跟踪号', '项目编号', '项目名称', '供应商','合同编号','库位','区位','在库类型', '回货时间', '备注'],
                    fieldName: ['odaId', 'matType', 'matQuality', 'matSpec', 'matWidth', 'matLength', 'matHeight', 'odaNum','pkMatLength', 'odaWeight', 'odaTrackCode', 'odaProCode', 'odaProName','supplier','contractNo','odaWhiIdName','odaPosition', 'odaInTypeName', 'odaBackDate', 'odaSpec'],
                    height: 700,
                    correctFormat: true,
                    minSpareRows: 100,
                    hiddenColumns: {
                        columns: [0],
                        indicators: true
                    },
                    columns: [
                        {
                            data: 'odaId',
                            type: 'numeric',
                            width: 40
                        },
                        {
                            data: 'matType',
                            type: 'text',
                            editor: false
                        },
                        {
                            data: 'matQuality',
                            type: 'text',
                            editor: false
                        },
                        {
                            data: 'matSpec',
                            type: 'text',
                            editor: false
                        },
                        {
                            data: 'matWidth',
                            type: 'numeric',
                            editor: false
                        },
                        {
                            data: 'matLength',
                            type: 'numeric',
                            editor: false
                        },
                        {
                            data: 'matHeight',
                            type: 'numeric',
                            editor: false
                        },
                        {
                            data: 'odaNum',
                            type: 'numeric',
                            editor: false
                        },
                        {
                            data:'pkMatLength',
                            type:'numeric',
                            editor: false
                        },
                        {
                            data: 'odaWeight',
                            type: 'numeric',
                            editor: false
                        },
                        {
                            data: 'odaTrackCode',
                            type: 'text',
                            editor: false
                        },
                        {
                            data: 'odaProCode',
                            type: 'text',
                            editor: false
                        },
                        {
                            data: 'odaProName',
                            type: 'text',
                            editor: false
                        },
                        {
                            data: 'supplier',
                            type: 'text'
                        },
                        {
                            data: 'contractNo',
                            type: 'text'
                        },
                        {
                            data: 'odaWhiIdName',
                            type: 'text',
                            readOnly: true
                        },
                        {
                            data: 'odaPosition',
                            type: 'text',
                            editor: false
                        },
                        {
                            data: 'odaInTypeName',
                            type: 'dropdown',
                            source: ['库存在库', '项目在库'],
                            editor: false
                        },
                        {
                            data: 'odaBackDate',
                            type: 'text',
                            editor: false
                        },
                        {
                            data: 'odaSpec',
                            type: 'text',
                            editor: false
                        }
                    ]
                })
            }
        });

        /** 表格搜索 */
        $("#btn-search").click(function () {
            js.table.search(table);
        });
        /** 表单打印 */
        $("#btn_print").click(function () {

            printOrderDetail($("#odrId").val());
        })
    })


</script>


</body>
</html>